<template>
	<view class="container">
		<!-- 导航栏 -->
		<!-- <uni-nav-bar title="关于我们" backgroundColor="#f5f5f5" color="#333"></uni-nav-bar> -->

		<!-- 页面内容 -->
		<scroll-view scroll-y class="content">
			<!-- 应用简介 -->
			<view class="section">
				<text class="title">关于我们</text>
				<text class="description">
					 His系统小程序是一款专为方便患者就医设计的应用，它集成了在线挂号、查看医生排班、管理门诊记录、处理取药流程、以及提供医院内导航等功能，旨在简化就医步骤，减少等待时间，提升就医体验。用户可以通过该程序快速找到合适的医生进行预约，随时查阅个人的医疗记录，并轻松完成取药等后续步骤，同时利用导航功能准确找到医院内的目的地。
				</text>
			</view>

			<!-- 开发团队 -->
		<!-- 	<view class="section">
				<text class="title">开发团队</text>
				<view class="team-member" v-for="(member, index) in teamMembers" :key="index">
					<image :src="member.avatar" style="width: 100rpx;height: 100rpx;"></image>
					<view class="member-info">
						<text class="name">{{ member.name }}</text>
						<text class="role">{{ member.role }}</text>
					</view>
				</view>
			</view> -->

			<!-- 版权信息 -->
			<!-- 		<view class="section copyright">
				<text>© 2025 YourAppName. All rights reserved.</text>
			</view> -->

			<!-- 联系我们 -->
			<view class="section">
				<text class="title">联系我们</text>
				<view class="contact-item" @click="openEmail">
					<u-icon name="email" size="36" color="#07c160" style="margin-right: 20rpx;"></u-icon>
					<text class="contact-text">发送邮件给我们</text>
				</view>
				<view class="contact-item" @click="callPhone">
					<u-icon name="phone" size="36" color="#07c160" style="margin-right: 20rpx;"></u-icon>
					<text class="contact-text">拨打电话</text>
				</view>
			</view>

			<!-- 社交媒体链接 -->
			<view class="section">
				<text class="title">关注我们</text>
				<view class="social-media">
					<view class="media-icon" @click="openLink('https://weibo.com')">
						<u-icon name="weibo" size="40" color="#fff"></u-icon>
					</view>
					<view class="media-icon" @click="openLink('https://www.facebook.com')">
						<u-icon name="facebook" size="40" color="#fff"></u-icon>
					</view>
					<view class="media-icon" @click="openLink('https://twitter.com')">
						<u-icon name="twitter" size="40" color="#fff"></u-icon>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const teamMembers = ref([{
			name: '王彦辉',
			role: '项目经理',
			avatar: '/static/avatar/headAvatar-3.png'
		},
		{
			name: '李子腾',
			role: '前端开发',
			avatar: '/static/avatar/headAvatar-4.png'
		},
		{
			name: '胡博奎',
			role: '后端开发',
			avatar: '/static/avatar/headAvatar-5.png'
		}
	]);

	// 打开邮箱
	function openEmail() {
		// uni.showToast({
		// 	title: "功能未开放"
		// })
		// uni.navigateTo({
		// 	url: 'mailto:support@yourapp.com'
		// });
		uni.setClipboardData({
			data:'https://mail.163.com/'
		})
	}

	// 拨打电话
	function callPhone() {
		// uni.showToast({
		// 	title: "功能未开放"
		// })
		uni.makePhoneCall({
			phoneNumber: '15175204672'
		});
	}

	// 打开外部链接
	function openLink(url) {
		uni.showToast({
			title: "功能未开放"
		})
		// plus.runtime.openURL(url);
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
		background-color: #f9f9f9;
	}

	.content {
		// padding: 20rpx;
	}

	.section {
		margin-bottom: 40rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
	}

	.title {
		font-size: 36rpx;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.description {
		font-size: 28rpx;
		color: #666;
		line-height: 48rpx;
		display: block;
	}

	.team-member {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		// justify-content: space-between;
	}

	.member-info {
		margin-left: 20rpx;
	}

	.name {
		font-size: 32rpx;
		color: #333;
		display: block;
	}

	.role {
		font-size: 24rpx;
		color: #999;
		display: block;
	}

	.copyright {
		text-align: center;
		font-size: 24rpx;
		color: #999;
	}

	.contact-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
	}

	.contact-text {
		font-size: 28rpx;
		color: #333;
	}

	.social-media {
		display: flex;
		justify-content: space-around;
		padding-top: 20rpx;
	}

	.media-icon {
		width: 80rpx;
		height: 80rpx;
		background-color: #07c160;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>